<template>
  <div class="itemList flex flex-around flex-wrap">
    <div class="singleItem" v-for="item in homeItemList"
         @click="singleItemClick(item)">
      <div class="img">
        <img :src="item.img" alt="">
      </div>
      <div class="title bold">{{item.title}}</div>
      <div class="price bold">{{item.price}}</div>
      <div class="des">{{item.des}}</div>
      <div class="add bold textAlignCenter" @click.stop="addCar(item)">加入购物车</div>
    </div>
  </div>
</template>
<script>
export default {
name: "homeItem",
  props:{
    homeItemList:{
      type:Array,
    }
  },
  methods:{
    addCar(item){
      const obj={};
      obj.id=item.id;
      obj.title=item.title;
      obj.img=item.img;
      obj.price=item.price;
      obj.des=item.des;
      obj.type=item.type; obj.typeEn=item.typeEn;
      this.$store.commit('addItem',obj);
      console.log("成功加入购物车:["+item.id+item.title+"]"+"---in home")
    },
    singleItemClick(item){
      console.log("查看详情:["+item.id+item.title+"],"+"上一页面是:"+this.$route.path);
      this.$router.push("detail?id="+item.id);
    }
  }
}
</script>

<style scoped>

.singleItem{
  width: 40%;
  height: 15rem;
  padding: .5rem;
  margin: .5rem;
  border: .01rem solid #000000;
  border-radius: .2rem;
}
.itemList::after{
  content: ' ';
  width: 50%;
  display: block;
}

.singleItem .img{
  width: 100%;
  height: 8rem;
}
.singleItem .img img{
  width: 100%;
  height: 100%;
}
.singleItem .des{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a09b9b;
  margin-bottom: .5rem;
}
.price{
  color: #FF4400;
}
.price::before{
  content: "￥";
  color: #FF4400;
}
.add{
  width: auto;
  background-color: #DD001B;
  height: 2rem;
  line-height: 2rem;
  color: #fff;
  border-radius: 1rem;
}
</style>